<template>
	<header class="title-section">
	    <img src="@/assets/jhk-1718933887037.jpg" alt="背景图片" class="image"/>
	    <h1>东软环保公众监督平台</h1>
	    <h2>———反馈任务列表———</h2>
	</header>
  <div class="feedback-list">
    <div v-for="feedback in feedbacks" :key="feedback.id" class="feedback-item">
      <div class="left-section">{{ feedback.id }}</div>
      <div class="middle-section">
        <p>{{ feedback.province }} {{ feedback.city }} - {{ feedback.time }}</p>
        <p>{{ feedback.address }}</p>
      </div>
      <div class="right-section">
        <el-button type="primary" @click="goToCheck(feedback.id)">去检查</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElButton } from 'element-plus';

// 假设从后端获取的反馈数据
const feedbacks = ref([]);

// 模拟从后端获取数据的函数
async function fetchFeedbacks() {
  // 假设这里是异步获取数据的逻辑
  // 实际项目中需要替换成从后端接口获取数据的方法
  feedbacks.value = await fetch('api/feedbacks').then(response => response.json());
}

// 生命周期钩子，组件挂载时获取数据
onMounted(fetchFeedbacks);

// 处理点击“去检查”按钮的方法
function goToCheck(id) {
  // 处理跳转或其他操作，这里仅作示例
  console.log(`去检查反馈 ${id}`);
}
</script>

<style scoped>
	.title-section {
	  text-align: center;
	  
	}
.feedback-list {
  margin-top: 20px;
}
.feedback-item {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.left-section {
  flex: 1;
  font-weight: bold;
}
.middle-section {
  flex: 4;
  margin-left: 10px;
}
.right-section {
  flex: 1;
  text-align: center;
}
.image {
    display: block;
    margin: auto;
	width: 100%;
    height: auto;
}
h1, h2 {
  color: lightblue;
}
</style>
